---
title: How to Create a Highlight Hover Effect with Tailwind CSS (v3)
description: Learn how to create a hover effect wherein one element is highlighted while the rest are faded using Tailwind CSS.
emoji: 🔦
slug: highlight-hover-effect-with-tailwindcss
pubDate: 2022-09-22
updatedDate: 2025-08-08
terms:
  - hover
  - effect
  - opacity
---

import BaseAd from '../../components/BaseAd.astro'

<BaseAd />

You may have seen a hover effect on the web where the element you're hovering
over remains fully opaque, while its sibling elements become less opaque.

## Creating this effect in Tailwind CSS

With the new syntax that allows us to write expressions like `[&:hover>li]`, we
can easily achieve this effect without any custom CSS 🎉

So, what do we need?

1. A parent element that reduces the opacity of its child elements when hovered
   over.
2. Child elements that revert their opacity when hovered over.

Here's a simple implementation of that:

```html
<ul class="[&:hover>li]:opacity-50">
  <li class="hover:!opacity-100">...</li>
  <li class="hover:!opacity-100">...</li>
  <li class="hover:!opacity-100">...</li>
  <li class="hover:!opacity-100">...</li>
</li>
```

Let's break down what's happening here:

**`[&:hover>li]:opacity-50`**

When you hover over the `ul`, it targets the `li` elements and reduces their
opacity to `0.5`.

**`hover:!opacity-100`**

When you hover over an `li` element, it forces its opacity back to `1`. The `!`
modifier applies `!important` to enforce this.

This is the basic structure of any hover effect like this in Tailwind CSS. You
can take this logic and apply it to a more complex design.

---

One thing you might notice is that when you hover between the `li` elements, one
of them will still be highlighted. This is to ensure that an element is
highlighted whenever the cursor is within the `ul`.

To get around this, you can use JavaScript and a package like
[Negative Hover](https://github.com/markmead/negative-hover) that I wrote.
